<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react/react17.development.js"></script>
    <script src="../react/react-dom17.development.js"></script>
    <script src="../react/babel.min.js"></script>
</head>

<body>

    <div id="main"></div>
    <script type="text/babel">
        class Com extends React.Component {
            constructor() {
                // （调用父类中的constructor,直接执行父类中的所有内容）
                // 必须调用super
                super();
                // console.log(this);
                // this.state 存放私有数据 一般都是设置初始值 后续动态更改
                // 通过固定的语法更改后 会监听数据的更改 重新调用render
                this.state = {
                    num: 100
                }
                // this.str ='aaa';
            }
            render() {
                console.log('render函数被调用了');
                return (<div>
                    <h2>这是com组件</h2>
                    <p>{this.state.num}</p>
                    <button onClick={(e) => {
                        this.updatanum(e);
                    }}>点击更改num</button>
                    {/*<p>{this.str}</p>*/}
                    <ComTwo title='标题' />
                </div>)
            }
            updatanum(e) {
                // this 是当前组件对象
                //console.log('====',this);
                //console.log('====',e);

                // this.state.num = 120;

                // setState() 函数更改state对象内属性
                // 在更改后  会重新调用render函数
                // （会重新渲染页面·）
                this.setState({
                    num: this.state.num + 10,
                })
            }
        }
        class ComTwo extends React.Component {
            render() {
                //this.props接收组件标签创建时传递过来的值
                // 只读属性
                // console.log(this.props);//{title:'标题'}
                return (<div></div>)
            }
        }
        ReactDOM.render(<Com />, document.getElementById('main'))

    </script>
</body>

</html>